<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 不建议这样写  v-for优先级更高 -->
			<!-- 问题：先创建6个h1，然后删除2个h1---》消耗性能 -->
			<h1 v-for="item in arr" v-if="item>=3">{{item}}</h1>
			
			<!--template：作用和div一样，但是不会渲染标签 -->
			<template>111</template>
			
			<!-- 直接创建4个h1 -->
			<template v-for="item in arr">
				<h1 v-if="item>=3">{{item}}</h1>
			</template>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					arr:[1,2,3,4,5,6]
				}
			})
		</script>
	</body>
</html>
